class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            namber: '',
            list: [],
            ishide: 'none',
            counts: [],
            start: 0,
            pagesize: 12,
            keyword: '',
            showswitch: !0,
            pagestart: 0,
            clicknew: !1,
            id: 0,
            isshow: 1,
            imgsrc: "",
            fileimgshow: !0,
        };
    }

    formatlist(list) {
        var listitem = [],wulist=[];
        if(list.length>0){
            list.forEach((x, i) => {
                listitem.push(
                    <tr key={i}>
                         <td><p className="td-img" style={{display:x.imgsrc&&x.imgsrc!='null'?'':'none'}}><img src={x.imgsrc?`${API_HEAD}imgs/${x.imgsrc}`:''}/></p><p style={{display:x.imgsrc&&x.imgsrc!='null'?'none':''}}>无</p></td>
                         {/* <td>{x.name}</td> */}
                        <td className="tconter audiosrc"><p style={{ display: x.audiosrc ? "none" : "" }}>无</p><audio style={{ display: x.audiosrc ? "" : "none" }} src={`${Constant.AUDIOSRC}/${x.audiosrc}`} controls="controls">Your browser does not support the audio tag.</audio></td>
                        <td>{x.type=='FOLLOWUP'?'跟读题':'选择题'}</td>
                        <td className="tconter">{x.state == "ON" ? "显示" : "隐藏"}</td>
                        <td className="tconter">{x.orders}</td>
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>
                                <div data-toggle="modal" data-target="#modalOne">
                                    <img src="./src/edit.png" />
                                    <p className='edit' onClick={this.todetail.bind(this, x.id)}>编辑</p>
                                </div>
                                <div>
                                    <img src={`./src/${x.state == "1" ? "hide" : "show"}.png`} />
                                    <p className='edit' onClick={this.setshow.bind(this, x.id, x.state)}>{x.state == "ON" ? "隐藏" : "显示"}</p>
                                </div>
                                <div>
                                    <img src="./src/sort.png" />
                                    <p className="edit" onClick={this.toorder.bind(this, x.id)}>排序</p>
                                </div>
                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
                            </div>
                        </td>
                    </tr>
    
    
                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({ listitem, list, originallist: list,wulist })
    }
    // 编辑
    todetail(e) {
        let {cid}=this.state
        window.location.href="./addsubject.html?id="+e+"&cid="+cid
    }
    // 显示隐藏
    setshow(e, i) {
        let { start } = this.state
        Subjectsetshow(e, res => {
            if (res.issuccess == 1) {
                alert(`${i == "ON" ? '隐藏' : '显示'}成功`)
                this.freshlist()
            }
        })
    }
    toorder(id) {
        let order = prompt("请输入1-999的正整数"), { start } = this.state
        if (order == "" || order == null) {
            return;
        }
        if (isNaN(order) || order < 1 || order > 999) {
            return;
        }
        order = Math.floor(order);
        let data = { id, orders:order };
        Subjectsetorder(data, res => {
            if (res.issuccess == 1) {
                alert("设置成功");
                this.freshlist();
            }
        });
    
    }
    // 删除
    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        Subjectdel(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist()
            }
        })
    }

    inputchange(prop, e) {
        this.setState({ [prop]:e.target.value }) 
    }
    // 点击新建或编辑
    // getnew(start) {
    //     this.setState({ clicknew: !this.state.clicknew, id: '0' });
    // }

    submit() {
        var {  title } = this.state, that = this, err = '',imgarr = [];
        if (title == "") err = "请输入科目名称"
        if (err.length > 0) {
            alert(err);
            return
        }
        var submitdata = { title }
    
            if (this.state.id > 0) submitdata['id'] = this.state.id;
            Coursetypeaoe(submitdata, res => {
                if (res.issuccess == 1) {
                    alert(`${this.state.id > 0 ? '修改' : '保存'}成功`);
                    that.setState({title:'',id:0,})
                    that.freshlist()
                }
            })

    }
    searchinput(e) {
        // console.log(e.target.value,'e.target.value')
        this.setState({ keyword: e.target.value })
    }
    // 排序
    // search(){
    //     if(this.state.keyword.length==0) return;
    //     let {keyword} = this.state;

    // audiocatesetorder(keyword,res=>{
    //     if(res.issuccess==1){
    //         // console.log(res,'res.data')
    //         this.formatlist(res.data);
    //         this.setState({showswitch:!1})
    //     }
    // })

    // }
    reset() {
        this.setState({ keyword: '', showswitch: !0 });
        this.freshlist(0, 'ALL');
    }

    componentDidMount() {
        let that=this
        let cid = GetQueryString('id')
        if (cid != 'null' && cid) {
            that.setState({ cid }, () => {
                that.freshlist()
            })
        }else{
            window.location.href = "./testpaper.html";
        }

    }

    
    freshlist() {
        let { cid } = this.state;
        Subjectgetlist(cid, res => {
            if (res.issuccess == 1) {
                // if (start == 0) {
                //     let pagecount = Math.ceil(res.total / pagesize);
                //     this.setpager(pagecount, start);
                //     this.setState({ start,total:res.total })
                // }
                this.formatlist(res.list);
            }
        })
    }

    // setpage(e){
    //     let {pagesize,start}=this.state
    //     pagesize=parseInt(e)
    //     start=0
    //     this.setState({pagesize,start},()=>{
    //         this.freshlist(start)
    //     })
    // }
    // setpager(pagecount, start) {
    //     let counts = [];
    //     for (let i = 1; i < pagecount + 1; i++) {
    //         counts.push(start + i)
    //     }
    //     this.setState({ counts })
    // }
    // clickpage(e) {
    //     console.log(e)
    //     let { start, pagesize } = this.state
    //     start = e * pagesize
    //     this.setState({ pagestart: e, start }, () => {
    //         this.freshlist(start)
    //     })
    // }
    // 图片
    // filechangeimg(e) {
    //     var that = this;
    //     var filedata = $('#file' + e)[0].files[0];
    //     let _name, _fileName;
    //     _name = $('#file' + e)[0].value;
    //     _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
    //     if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
    //         alert("上传图片格式不正确，请重新上传");
    //     } else {
    //         if (e == '3') {
    //             this.setState({
    //                 fileimgshow: !1,
    //                 imgstate: ''
    //             })
    //         }
    //         else if (e == '1') {
    //             this.setState({
    //                 lbfileimgshow: !1,
    //                 lbimgstate: ''
    //             })
    //         }
    //         let filee = e
    //         var reader = new FileReader();
    //         reader.readAsDataURL(filedata);
    //         reader.onload = function (e) {
    //             var base64str = e.target.result;
    //             that.putswiperimglistdata([base64str], filee)
    //         }
    //     }
    // }
    // putswiperimglistdata(target, e) {
    //     let { imgsrc } = this.state;
    //     if (e == '3') {
    //         imgsrc = target[0]
    //         if (!isBase64(imgsrc)) {
    //             if (imgsrc.indexOf(`${API_HEAD}`) == -1) {
    //                 imgsrc = `${API_HEAD}imgs/${src}`

    //             }
    //         }
    //     }

    //     this.setState({
    //         imgsrc
    //     })

    // }
    // clickupload(e) {
    //     $('#file' + e).click();
    // }
    // del_img(e) {
    //     if (e == '3') {
    //         this.setState({
    //             imgsrc: '',
    //             fileimgshow: !0,
    //             imgstate: '',
    //         })
    //     }
    // }
    // // 上传图片
    // uploadimg(arr) {
    //     let uploadimgarr = [], { name, namber,imgsrc,start } = this.state,that=this
    //     arr.forEach((x, i) => {
    //         if (x.indexOf(`${API_HEAD}`) == -1) {
    //             if (isBase64(x)) {
    //                 uploadimg(x, res => {
    //                     if (res.issuccess == 1) {
    //                         x = `${API_HEAD}imgs/${res.path}`
    //                         uploadimgarr.push(x)
    //                     } else {
    //                         alert(res.msg)
    //                         err = 1
    //                         return;
    //                     }
    //                 })
    //             }
    //         } else {
    //             uploadimgarr.push(x)
    //         }
    //     })
    //     if (uploadimgarr.length == arr.length) {
    //         uploadimgarr.forEach((x, i) => {
    //             imgsrc = x.replace(`${API_HEAD}imgs/`, '')
    //         })

    //         var data = { name, orders: namber,thumbpath:imgsrc }
    
    //         if (this.state.id > 0) data['id'] = this.state.id;
    //         audiocateaoe(data, res => {
    //             if (res.issuccess == 1) {
    //                 alert(`${this.state.id > 0 ? '修改' : '保存'}成功`);
    //                 that.setState({id: 0, fileimgshow: !0, imgsrc: '', name: ''})
    //                 that.freshlist(start)
    //             }
    //         })
    //     }
    // }
    add(){
        let {cid}=this.state
        window.location.href="./addsubject.html?cid="+cid
    }
    toback(){
        window.location.href = "./testpaper.html";
    }
    render() {
        let { title, counts, listitem, pagestart, keyword, imgsrc, name, namber,wulist } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
              
                <div className='content_wrap panel-default content_wrap'>

                    <div className='breadLine '>
                        <span>当前目录</span> > <span onClick={this.toback.bind(this)} style={{ cursor: 'pointer' }}>试卷管理</span> > 题目管理
                     </div>
                     
                    <div className="content">
                        <div className="tabletit" >
                        <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>
                        
                            {/* <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.getnew.bind(this)} >{this.state.id == 0 ? "新建" : "编辑"}名称</p> */}
                        </div>
                        <table className="tab">
                            <thead>
                                <tr>

                                    <th>图片</th>
                                    {/* <th>标题</th> */}
                                    <th>音频</th>
                                    <th>类别</th>
                                    <th className="tconter">状态</th>
                                    <th className="tconter">排序</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {wulist}
                    </div>







{/* 
                    <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                        </div> */}


                </div>

            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='testpaper' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)
